<template>
  <div>
    <div class="login-container">
      <h2 class="login-title">LOGIN</h2>
      <el-form :model="form" :rules="rules" ref="loginForm" label-width="100px">
        <el-form-item label="USERNAME" prop="account" class="el-form-item__error">
          <el-input v-model="form.account" class="input-field" placeholder="Enter Username"></el-input>
        </el-form-item>
        <el-form-item label="PASSWORD" prop="password" class="el-form-item__error">
          <el-input type="password" v-model="form.password" class="input-field" placeholder="Enter password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="login">ENTER</el-button>
        </el-form-item>
      </el-form>
      <div class="login-links">
        <a href="#" class="login-link">Lost Password?</a>
        <span class="login-link-separator">|</span>
        <router-link to="/register" class="login-link2">Create An Account</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                account: "",
                password: "",
            },
            rules: {
                account: [
                    { required: true, message: "请输入用户名", trigger: ["change", "blur"] },
                    {
                        pattern: /[a-zA-Z]/,
                        message: "字母",
                        trigger: ["change", "blur"],
                    },
                ],
                password: {
                    required: true,
                    min:3,
                    message: "请输入至少3个字符的密码",
                    trigger: ["change", "blur"],
                },
            },
        };
    },
    methods: {
        login() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    const formData = {
                        username: this.form.account,
                        password: this.form.password,
                    };
                    this.$axios
                        .post("api/login", formData)
                        .then((successResponse) => {
                            if (successResponse.data.code === 100) {
                                localStorage.setItem('user', JSON.stringify(successResponse.data.user));
                                console.log(localStorage.getItem("user"));
                                this.$router.push('/admin/userIndex');
                            }
                            if (successResponse.data.code === 200) {
                                localStorage.setItem('user', JSON.stringify(successResponse.data.user));
                                console.log(localStorage.getItem("user"));
                                this.$router.push('/user/index');
                            }


                            if (successResponse.data.code === 400) {
                                console.log(successResponse.data);
                                alert("登录失败");
                            }
                        })
                        .catch((failResponse) => {
                            console.error();
                        });
                } else {
                    return false;
                }
            });
        },

    },
};
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 75px;
  background:transparent;
  border: transparent;
  box-shadow: none;
  padding: 20px;
  width: 600px;
  height: 350px;
}

.login-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.input-field {
  border:0;
  margin-bottom: 10px;
  padding-right: 35px;
  padding-bottom:15px;
}
input.el-input__inner {
  margin-top: -5px;
  width: 195px;
  height:35px;
  outline: none;
  border:1px solid #2c3e50;
  background: transparent;
  border-radius: 45px;
}

.login-button {
  padding: 10px 25px;
  background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
  color: #000000;
  border: none;
  border-radius: 75px;
  cursor: pointer;
  font-size: 16px;
}
.login-button:hover{
  cursor: pointer;
  background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);

}

.login-links {
  margin-top: 10px;
  display: flex;
  justify-content: center;

}

.login-link {
  font-weight: bold;
  font-size: 20px;
  color: #007bff;
  text-decoration: none;
  margin: 0 5px;
}
.login-link2{
  font-weight: bold;
  font-size: 20px;
  color: #2c3e50;
  text-decoration: none;
  margin: 0 5px;
}
.login-link-separator {
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  margin: 0 5px;
}

.el-form-item__error {
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
}
</style>
